<template>
  <div>
    <div class="maincenter">
      <a-row :gutter="16">
        <a-col :span="3">
          <a-input placeholder="请输入大类" style="width: 100%;" />
        </a-col>
        <a-col :span="3">
          <a-input placeholder="请输入小类" style="width: 100%" />
        </a-col>
        <a-col :span="3">
          <a-select
            show-search
            placeholder="Select a person"
            option-filter-prop="children"
            style="width: 100%"
            :filter-option="filterOption"
            :show-arrow="false"
            @focus="handleFocus"
            @blur="handleBlur"
            @change="handleChange"
          >
            <a-select-option value="jack"> Jack </a-select-option>
            <a-select-option value="lucy"> Lucy </a-select-option>
            <a-select-option value="tom"> Tom </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="3">
          <a-button type="primary" @click="btnquery">查询</a-button>
        </a-col>
      </a-row>
    </div>
    <a-table :columns="columns" :data-source="data" bordered :loading="loading" :pagination="pagination" class="maincon" :row-selection="rowSelection">
    </a-table>
    <div class="btn">
      <a-button type="primary" style="margin-right: 20px" @click="btn">保存 </a-button>
      <a-button type="primary" @click="remove"> 取消 </a-button>
    </div>
  </div>
</template>
  <script>
const columns = [
  {
    title: '大类',
    dataIndex: 'age',
    key: '序号'
  },
  {
    title: '小类',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: '品名',
    dataIndex: 'address',
    key: 'address'
  },
  {
    title: '细分类',
    dataIndex: 'address',
    key: 'address'
  }
]

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer']
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser']
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher']
  }
]

export default {
  name: 'salesColor',
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      data,
      columns,
      loading: false,
      pagination: false,
      visible: false,
      form: {
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        }
      }
    }
  },
  methods: {
    btnquery() {
      console.log('11')
    },
    handleChange(value) {
      console.log(`selected ${value}`)
    },
    handleBlur() {
      console.log('blur')
    },
    handleFocus() {
      console.log('focus')
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    // 保存
    btn() {
      this.$router.push('/spection/Designlist/index')
    },
    remove() {
      this.$router.push('/spection/Designlist/index')
    }
  }
}
</script>
  <<style scoped lang=less>
  /deep/ .ant-table-thead > tr > th {
  text-align: center;
}
/deep/ .ant-table table {
  text-align: center;
}
.btn{
    margin: 20px 0 0 50%;
}   
.maincon{
    margin: 60px;
}
.maincenter{
  margin: 60px 0 0 60px;
}
  </style>
  